<!-- @format -->

<!-- /components/compInput/compInput.vue -->
<template>
  <view class="viewport">
    <image src="../../static/mine/myTopBgc.png" mode="scaleToFill" />
    <view class="middleCon">
      <image src="../../static/mine/myContentBgc.png" mode="scaleToFill" />
    </view>
    <view class="profile">
      <image src="../../static/mine/profile.png" mode="scaleToFill" />
    </view>
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <image src="../../static/mine/login.png" mode="scaleToFill" />
        <text class="label">登录名</text>
        <input v-model="form.userName" placeholder="请填写账号" />
      </view>
      <view class="form-item">
        <image src="../../static/mine/password.png" mode="scaleToFill" />
        <text class="label">密码</text>
        <input v-model="form.password" placeholder="请填写密码" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="onSubmit">登录</view>

    <view class="tips">
      <checkbox-group @change="checked">
        <label>
          <checkbox value="cb" :checked="checkIf" />
          勾选即代表您已同意
          <text> 《隐私政策》 </text>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>

<script>
import { validate } from '@/utils/validate'
export default {
  data() {
    return {
      form: {
        userName: '',
        password: '',
      },
      rules: {
        userName: [{ required: true, message: '请填写账号' }],
        password: [{ required: true, message: '请填写密码' }],
      },
      checkIf: false,
    }
  },
  methods: {
    checked(e) {
      this.checkIf = !this.checkIf
      console.log(e.detail.value.length)
      this.length = e.detail.value.length
    },
    onSubmit() {
      // 如果表单校验失败，退出函数
      let _this = this
      if (_this.checkIf === false) {
        uni.showToast({
          title: '请确认是否同意隐私条例',
          icon: 'none',
        })
        return
      }
      if (!validate(_this.form, _this.rules)) return
      uni.request({
        url: _this.$httpApi.install.wxLogin,
        method: 'POST',
        data: _this.form,
        success(res) {
          console.log(res)
          uni.setStorageSync('userId', res.data.data.userId)
          uni.setStorageSync('phonenumber', res.data.data.phonenumber)
          uni.setStorageSync('openid', '1')
		  uni.setStorageSync('sessionKey', res.data.sessionKey)

		  uni.setStorageSync('nickName', res.data.data.nickName)

		  uni.setStorageSync('userName', res.data.data.userName)
		  
		  uni.setStorageSync('avatar', res.data.data.avatar) //2023-12-16
	    uni.setStorageSync('optionId', '2')
	
          //判断数据返回后是否有结果
          if (res.data.code == 200) {
            uni.showToast({ title: '登录成功', icon: 'none' })
            // 后退回到上一页
            setTimeout(() => {
              // 后退回到上一页
              uni.navigateBack({
                delta: 2,
              })
            }, 500)
          } else {
            uni.showToast({ title: '登录失败!', icon: 'none' })
          }
        },
        fail(error) {
          uni.showToast({
            icon: 'error',
            title: '登录失败',
            duration: 1000,
          })
        },
      })
      console.log(this.params)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f4f4;
}

.form {
  margin: 20rpx 20rpx 0;
  padding-left: 25rpx;
  width: 690rpx;
  height: 244rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
}

.form .form-item {
  display: flex;
  min-height: 96rpx;
  line-height: 46rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  border-left: 10rpx;
  position: relative;
  image {
    margin-top: 10rpx;
    width: 22.51rpx;
    height: 22.51rpx;
  }
}

.form .form-item:last-child {
  border: none;
}

.form .form-item .label {
  width: 200rpx;
  color: #333;
  margin-left: 13rpx;
}

.form .form-item input {
  flex: 1;
  display: block;
  height: 46rpx;
}

.form .form-item switch {
  position: absolute;
  right: -10rpx;
  transform: scale(0.7) translateY(-8px);
}

.form .form-item picker {
  flex: 1;
}

.form .form-item .region {
  color: #333;
}

.form .form-item .placeholder {
  color: #888;
}

.button {
  width: 670rpx;
  height: 88rpx;
  top: 750rpx;
  left: 20rpx;
  position: absolute;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #303030;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  // background-color: #f8fafe;
  // padding: 20rpx 40rpx;
  image {
    width: 750rpx;
  }
}

.profile {
  position: absolute;
  top: -90rpx;
  left: 270rpx;
  width: 196rpx;
  height: 196rpx;
  background: #fff;
  border-radius: 50%;
  margin-top: 300rpx;

  box-shadow: 0rpx 0rpx 15rpx 1rpx rgba(3, 69, 145, 0.14);
  opacity: 1;
  image {
    width: 196rpx;
    height: 196rpx;
  }
}

.middleCon {
  position: absolute;
  width: 750rpx;
  height: 80vh;
  top: 300rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.tips {
  position: absolute;
  bottom: 400rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
}
.tips text {
  color: #5d87ed;
}
</style>
